// html,
// body {
//     margin: 0;
//     padding: 0;
//     /* font-family: MV Boli; */
//     font-family: "Consolas", "Microsoft JhengHei", "Apple LiGothic Medium,Microsoft YaHei", "å¾®è½¯é›…é»‘", "Arial", sans-serif;
//     font-size: 16px;
//     line-height: 1.8rem;
// }

// * {
//     padding: 0;
//     margin: 0;
// }

// .main-container {
// max-width: 800px;
// padding: 90px 25px 100px;
// margin: 0 auto;
// }

.width-main {
  width: 940px;
}


/* 流动布局 */

.flex {
  display: flex;
}

.flex-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.flex-direction {
  display: flex;
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* 自定义滚动条样式 */

// 解决Eelement全局加载时候闪屏
.el-loading-parent--hidden {
  overflow: auto !important;
}

// ::-webkit-scrollbar {
//   width: 6px;
// }

// ::-webkit-scrollbar-track {
//   border-radius: 8px;
//   background-color: #dcdcdc
// }

// ::-webkit-scrollbar-thumb {
//   border-radius: 5px;
//   background-color: #929292;
// }


/* 标题通用样式 */

// h3 {
//     position: relative;
//     margin: 20px 0;
// }

// h3::before {
//     font-weight: 600;
//     color: #eb5055;
//     position: absolute;
//     top: 0;
//     left: -15px;
//     content: "#";
// }

.color-link {
  color: #409eff !important;
  cursor: pointer;
}

.text-height {
  line-height: 1.5em;
}

.text-pointer {
  cursor: pointer;
}

.title-button {
  font-size: .9rem;
  font-weight: 700;
  color: #3c3626;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: .6rem 2rem;
  box-sizing: border-box;
  margin: 0 0 .4rem;
  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &::before {
    content: "▶︎";
    font-size: 7px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-line2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-line3 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.text-bold {
  font-weight: bold;
}

.text-xxl {
  font-size: 28px;
}

.text-xl {
  font-size: 18px;
}

.text-df {
  font-size: 16px;
}

.text-sm {
  font-size: 14px;
}

.text-xs {
  font-size: 12px;
}

/* 背景文字颜色定义 */
.bg-main {
  background: rgb(234, 231, 223);
  // 234,231,223
}

.bg-orange {
  background-color: #f68e5f;
  color: #fff;
}

.bg-purple {
  background-color: #bc99c4;
}

.bg-green {
  background-color: #46c47c;
}

.color-green {
  color: #46c47c;
}

.bg-red {
  background-color: #e8583d;
}

.color-red {
  color: #e8583d;
}

.text-red {
  color: #e8583d;
}

.bg-yellow {
  background-color: #f9bb3c;
}

.bg-blue {
  background-color: #6fa3ef;
}

.margin-tb-sm {
  margin: 15px 0 15px 0;
}

.margin-top-sm {
  margin: 15px 0 0 0;
}

.margin {
  margin: 30px;
}

.margin-sm {
  margin: 15px;
}

.margin-top {
  margin: 30px 0 0 0;
}

.margin-bottom {
  margin: 0 0 30px 0;
}

.margin-tb {
  margin: 30px 0 30px 0;
}

.margin-right {
  margin: 0 30px 0 0;
}

.margin-right-xs {
  margin-right: 5px;
}

.margin-left {
  margin: 0 0 0 30px;
}

.margin-left-xs {
  margin: 0 0 0 5px;
}

.margin-lr {
  margin: 0 30px 0 30px;
}

.padding {
  padding: 30px;
}

.padding-top {
  padding: 30px 0 0 0;
}

.padding-bottom {
  padding: 0 0 30px 0;
}

.padding-tb-sm {
  padding: 20px 0;
}

.padding-bottom-sm {
  padding: 0 0 20px 0;
}

.padding-tb {
  padding: 30px 0 30px 0;
}

.padding-right {
  padding: 0 30px 0 0;
}

.padding-left {
  padding: 0 0 0 30px;
}

.padding-lr {
  padding: 0 30px 0 30px;
}

.padding-sm {
  padding: 20px;
}

.padding-xl {
  padding: 40px;
}

.padding-top-xl {
  padding: 40px 0 0 0;
}

.padding-bottom-xl {
  padding: 0 0 40px 0;
}

.padding-tb-xl {
  padding: 40px 0 40px 0;
}

.padding-right-xl {
  padding: 0 40px 0 0;
}

.padding-left-xl {
  padding: 0 0 0 40px;
}

.padding-lr-xl {
  padding: 0 40px 0 40px;
}
